<template>
  <section class="pay-container" v-cloak>
    <p class="class-name">缴费流水: {{className||channelName}}</p>
    <el-row class="search-box">
      <el-col :span="24">
        <label for="" class="choose">
          <span>缴费日期：</span>
          <el-date-picker
            v-model="dateTime"
            type="datetimerange"
            size="small"
            placeholder="选择日期范围"
            :picker-options="dateOptions">
          </el-date-picker>
        </label>
        <label for="" class="choose" v-if="$route.name !== 'settlementDetail'">
          <span>缴费项目：</span>
          <el-select v-model="payment" filterable placeholder="请选择" size="small" style="width:160px" class="select-box year-box">
            <el-option
              v-for="item in payList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </label>
        <label for="" class="choose">
          <span>缴费单号：</span>
          <el-input v-model="orderNo" placeholder="请输入缴费单号" size="small" class="select-box"></el-input>
        </label>
        <label for="" class="choose">
          <el-button icon="search" type="primary" size="small" @click="search">搜索</el-button>
        </label>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-between" class="export">
      <div class="data-t">
        <span>总缴费笔数：{{ countInfo.payNum }}</span>
        <span>总缴费金额：{{ countInfo.payAmount | currency }}元</span>
      </div>
      <el-button icon="self-daochu" size="small" @click="exportData" class="blue">导出</el-button>
    </el-row>
    <el-row>
      <ctable :thead="thead" :table-data="lists" :options="options" :page-data="pageObj" :opt-width="80" all-align="center" :serial="true"></ctable>
    </el-row>
  </section>
</template>

<script>
import {getWaterList, getCountInfo, getCountInfoWaterOption, getCountInfoWaterList, getCountInfoWaterInfo} from 'api/school/settlement/index'
import {getPayMent} from 'api/school/payManage/index'
import ctable from 'components/common/ctable'
import common from 'src/util/common'
import {currency, timeFormat} from 'src/filter/index'
export default {
  data () {
    return {
      payment: 0, // 缴费项目
      payList: [], // 缴费项目列表
      dateTime: [], // 缴费日期
      lists: [], // 数据列表,
      thead: [{ // ctable组件头
        name: '姓名',
        prop: 'studentName',
        width: 100
      }, {
        name: '缴费单号',
        prop: 'orderNo'
      }, {
        name: '证件号码',
        prop: 'cardNo'
      }, {
        name: '缴费时间',
        prop: 'payTime',
        format: this.dateFilter
      }, {
        name: '缴费金额',
        prop: 'price',
        format: this.priceFilter
      }, {
        name: '缴费项目',
        prop: 'schoolPaymentSkuName'
      }],
      options: [{
        name: '详情',
        callback: this.toDetail
      }],
      pageObj: { // 分页
        page: {},
        callback: this.getData
      },
      dateOptions: { // 时间组件参数
        disabledDate (time) {
          return time.getTime() > Date.now() - 8.64e7
        }
      },
      orderNo: '', // 缴费单号
      classId: Number(common.params('classId')), // 班级列表,
      className: common.params('className'), // 班级名称
      channelId: Number(common.params('channelId')), // 通道id
      channelName: common.params('channelName'), // 通道名称
      paymentType: common.params('paymentType'), // 集团或者学校
      countInfo: {} // 统计信息
    }
  },
  created () {
    let time = common.params('time')
    let max = `${this.timeFormat(time, 'yyyy-MM-dd')} 23:59:59`
    let min = `${this.timeFormat(time, 'yyyy-MM-dd')} 00:00:00`
    this.dateTime = [new Date(min), new Date(max)]
    if (this.classId) {
      getPayMent({
        classId: this.classId
      }).then(res => {
        this.payList = res.data
        this.payList.unshift({id: 0, name: '全部'})
      })
    } else {
      getCountInfoWaterOption({
        channelId: this.channelId,
        paymentType: this.paymentType
      }).then(res => {
        this.payList = res.data
        this.payList.unshift({id: 0, name: '全部'})
      })
    }
    this.getData(1)
  },
  components: {
    ctable
  },
  methods: {
    getData (int) { // 获取数据
      if (this.classId) {  // 按班级获取统计信息
        getCountInfo({
          startTime: parseInt(this.dateTime[0].getTime() / 1000),
          endTime: parseInt(this.dateTime[1].getTime() / 1000),
          schoolPaymentSkuId: this.payment,
          orderNo: this.orderNo,
          classId: this.classId
        }).then(res => {
          this.countInfo = res.data
        })
        // 获取数据列表
        getWaterList({
          page: int,
          count: 15,
          startTime: parseInt(this.dateTime[0].getTime() / 1000),
          endTime: parseInt(this.dateTime[1].getTime() / 1000),
          schoolPaymentSkuId: this.payment,
          orderNo: this.orderNo,
          classId: this.classId
        }).then(res => {
          this.lists = res.data || []
          this.pageObj.page = res.page
        })
      } else {
        getCountInfoWaterInfo({
          startTime: parseInt(this.dateTime[0].getTime() / 1000),
          endTime: parseInt(this.dateTime[1].getTime() / 1000),
          schoolPaymentSkuId: this.payment,
          orderNo: this.orderNo,
          channelId: this.channelId
        }).then(res => {
          this.countInfo = res.data
        })
        // 获取数据列表
        getCountInfoWaterList({
          page: int,
          count: 15,
          startTime: parseInt(this.dateTime[0].getTime() / 1000),
          endTime: parseInt(this.dateTime[1].getTime() / 1000),
          schoolPaymentSkuId: this.payment,
          orderNo: this.orderNo,
          channelId: this.channelId
        }).then(res => {
          this.lists = res.data || []
          this.pageObj.page = res.page
        })
      }
    },
    toDetail (obj) {
      this.$router.push({name: 'settlementPayDetail', query: {id: obj.id}})
    },
    priceFilter (row, col, value) {
      return currency(value)
    },
    dateFilter (row, col, value) {
      return timeFormat(value, 'yyyy-MM-dd hh:mm:ss')
    },
    search () {
      this.getData(1)
    },
    exportData () {
      let loginKey = window.localStorage.loginKey
      window.open(`/net/schooladmin/${this.classId ? 'school-order/exports-statement-detail' : 'channel_statement/exports-statement-by-water'}?classId=${this.classId}&startTime=${parseInt(this.dateTime[0].getTime() / 1000)}&endTime=${parseInt(this.dateTime[1].getTime() / 1000)}&orderNo=${this.orderNo}&schoolPaymentSkuId=${this.payment}&login-key=${loginKey}`)
    }
  }
}
</script>
<style lang="less" scoped>
.pay-container {
  padding: 15px 25px 0;
  .data-t {
    color: #20a0ff;
  }  
  .class-name {
    line-height: 2;
    margin-bottom: 10px;
  }  
  .search-box {
    padding: 25px 0 25px 25px;
    border: 1px solid #d3dce6;
  }
  .choose {
    margin-right: 10px;
    .select-box {
      width: 150px;
    }
  }
  .export {
    margin-top: 10px;
  }
  .title-info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    background: #eef1f6;
    padding: 10px;
    color: #48576a;
  }
}
</style>
